<template>
  <n-config-provider id="body w-full" :theme="darkTheme" :theme-overrides="naiveTheme">
    <div class="absolute top-0 left-0 h-screen w-full">
      <div class="absolute top-0 left-0 bg-cover bg-center h-screen w-full opacity-20"
           style="background-image: url('/public/bg_1.png');width: 100vw;height: 100vh;"
      />

      <div class="w-full absolute top-0 left-0 flex justify-center opacity-90">
        <div class="bg-cover bg-center" style="background-image: url('/public/header1.svg');height: 7vh;width:calc(7vh * 23)" />
        <div class="pt-1 text-center w-full text-white font-bold absolute" style="font-size: 3.5vh;">{{ name }}</div>
      </div>

      <div v-if="back" style="height: 5vh; top:1vh;z-index: 999;width: 5vh;"
           class="absolute opacity-70 left-4 flex justify-center items-center cursor-pointer" @click="goBack"
      >
        <img src="/public/circle.svg" class="object-fill cursor-pointer w-full h-full">
        <n-icon :size="35" :color="char600" class="absolute"><ChevronBack /></n-icon>
      </div>

      <n-dropdown trigger="hover" size="huge" :options="menuOptions" @select="handleSelect">
        <div style="height: 5vh;top:1vh;z-index: 999;width: 5vh;" 
             class="absolute opacity-70 right-4 flex justify-center items-center cursor-pointer"
        >
          <img src="/public/circle.svg" class="object-fill w-full h-full">
          <n-icon :size="30" :color="char600" class="absolute opacity-50"><Apps /></n-icon>
        </div>
      </n-dropdown>
    </div>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { nav, navBack } from '../../shared/client/window'
import { ChevronBack, Apps } from '@vicons/ionicons5'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NIcon, NConfigProvider, darkTheme, NDropdown } from 'naive-ui'
import { char600 } from '../../shared/theme/color'

const props = defineProps({
  name: {
    type: String,
    required: true
  },

  back: {
    type: Boolean,
    required: false,
    default: true
  },

  backUrl: {
    type: String,
    required: false,
    default: ''
  },
})

function goBack() {
  if (props.backUrl) {
    nav(props.backUrl)
  } else {
    navBack()
  }
}

const menuOptions = [
  { label: '全局大屏', key: '/admin/global' }, 
  { label: '电站大屏', key: '/admin/site' },
  { label: '无人机大屏', key: '/aircraft' },
  { label: '数据分析', key: '/admin/operate/group' }
]
function handleSelect(key: string) {
  nav(key)
}

</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
